import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
const Child1 = () => {
  const [list,setList] = useState([])
  const getList = async() => {
    const res = await axios.get('https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2861438',{
      headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.film.list'
      }
    })

    console.log(res.data.data.films)
    setList(res.data.data.films)
  }

  useEffect(() => {
    getList()
  },[])

  // vue2 this.$router.push()
  // vue3 const router = useRouter()
  //      router.push()


  // 跳转详情页
  const navigate = useNavigate()
  const goDetail = (id) => {
    // navigate(`/detail?id=${id}`)
    // 动态路由
    navigate(`/detail/${id}?a=100`)
  }


  return (
    <div className='child1'>
      {list.map(item =>
        <div key={item.filmId} onClick={() => goDetail(item.filmId)}>
          <h3>{item.name}</h3>
          <img src={item.poster} width={100} alt="" />
        </div>
      )}
    </div>
  )
}

export default Child1